<template>
    <div id='Login'>
        <!-- <img src="../../static/copyright/A02_xr.jpg" alt=""> -->
        <!-- <video autoplay loop muted>
            <source src="../../static/copyright/Login.mp4"></source>
        </video> -->
        <a-row class="header logo-animate">
            <a-col :span="18">
                <!-- <div v-if="$store.state.commonModule.oemConfig && $store.state.commonModule.oemConfig.logo1"></div> -->
                <!-- <img ondragstart="return false" oncontextmenu="return false"
                    :src="$store.state.commonModule.oemConfig.logo1" style="margin-left:1rem;width:86px;height:32px"
                    alt="logo_img" />
                <img ondragstart="return false" oncontextmenu="return false" src="../../static/copyright/line_white.png"
                    style="margin:1rem;width:2px;height:24px" alt="line_img" />
                <img ondragstart="return false" oncontextmenu="return false" v-if="$i18n.locale == 'zh'"
                    :src="$store.state.commonModule.oemConfig.logo4" alt="logo_img" style="width:224px;height:32px" />
                <img ondragstart="return false" oncontextmenu="return false" v-if="$i18n.locale == 'en'"
                    src="../../static/copyright/logo_fbs2_English.png" alt="fbs_en_img"
                    style="width:142px;height:32px" /> -->
                    <img v-if="$store.state.commonModule.oemConfig.logo1" style="display: inline-block; margin-left:1rem;height:32px" :src="$store.state.commonModule.oemConfig.logo1" alt="logo">
            </a-col>
            <!-- <a-col :span="6" style="text-align: right">
	            <span style="font-size: 16px;cursor: pointer;" @click="handleChangeLanguage">
                    <a-icon :component="$i18n.locale == 'en' ? lanBtn_en : lanBtn_zh"/>
                    {{ $i18n.locale == 'en' ? $t("English") : $t("Chinese") }}
                </span>
            </a-col> -->
        </a-row>
        <a-row class='loginform login-box-animate'>
            <a-col>
                <div>
                    <a-spin :spinning="loginFormSpinning">
                        <div class="welcome">
                            <!-- 中英文切换 -->
                            <div>
                                <span class="change-lang-btn" @click="handleChangeLanguage">
                                    <!-- <i :class="$i18n.locale == 'zh'? 'icon icon-cn16l' : 'icon icon-en16l'"></i> -->
                                    <Iconfont class="icon" :type="$i18n.locale == 'zh' ? 'icon-cn16l' : 'icon-en16l'">
                                    </Iconfont>
                                    <!-- <a-icon :component="$i18n.locale == 'en' ? lanBtn_en : lanBtn_zh"/> -->
                                    {{ $i18n.locale == 'en' ? $t("English") : $t("Chinese") }}
                                </span>
                            </div>
                            <h2 class="wetitle">
                                <span> {{ $t('Welcome_login') }} </span>
                                <span>{{ $store.state.commonModule.oemConfig.softwareName }}</span>
                            </h2>
                            <!-- <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1; padding:10%" v-if="spinning == true"></a-spin> -->
                            <a-form id='loginform' :form='form'>
                                <!-- :label="$t('Account')" style="margin-bottom: 0" -->
                                <a-form-item>
                                    <a-input class="L-input" size="large" v-decorator="['user',
                                        { rules: [{ required: true, message: $t('Enter') + $t('Account') }] }]"
                                        :placeholder="$t('Enter') + $t('Account')">
                                        <a-icon slot="addonBefore" type='user' style="color:grey" />
                                    </a-input>
                                </a-form-item>
                                <!-- :label="$t('Password')" style="margin-bottom: 0" -->
                                <a-form-item>
                                    <a-input-password class="L-input" size="large" v-decorator="['pwd',
                                        { rules: [{ required: true, message: $t('Enter') + $t('Password') }] }]"
                                        type='password' :placeholder="$t('Enter') + $t('Password')">
                                        <a-icon slot="addonBefore" type='lock' style="color:grey" />
                                    </a-input-password>
                                </a-form-item>
                                <!-- :label="$t('VerCode')" -->
                                <a-form-item :validate-status="codeValidateStatus" :help="codeHelpTip">
                                    <a-row :gutter="16">
                                        <a-col :span="14">
                                            <a-input class="L-input" size="large" v-decorator="['code', {
                                                rules: [
                                                    { required: true, message: $t('Enter') + $t('VerCode'), trigger: 'blur' },
                                                    // {validator:validateCode, trigger: 'blur'}
                                                ]
                                            }]" :placeholder="$t('Enter') + $t('VerCode')" @change="handleCodeChange">
                                                <Iconfont slot="addonBefore" class="icon" type="icon-authority16f"
                                                    style="color:grey"></Iconfont>
                                                <!-- <i slot="addonBefore" class="icon icon-authority16f" style="color:grey"></i> -->
                                                <!-- <a-icon  type='lock' style="color:grey" /> -->
                                            </a-input>
                                        </a-col>
                                        <a-col :span="4">
                                            <div class="codeImage" @click="refreshCode">
                                                <SIdentify :identifyCode="identifyCode"></SIdentify>
                                                <!-- <img src="data:image/png;base64,这里放字符"/>  -->
                                                <!-- <img id="checkCode" :src="'data:image/png;base64,'+twoCode" @click="getCode"/> -->
                                            </div>
                                        </a-col>
                                    </a-row>
                                </a-form-item>
                                <!-- <a-form-item>
                                <a-input size="large" v-decorator='["mail",{rules:[{required:true,message:"请输入正确的邮箱地址"}, {
                                        pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,message:"邮箱输入格式有误"
                                    }]}]' placeholder='邮箱' autofocus>
                                    <a-icon slot="addonBefore" type="mail" style='color:grey'/>
                                </a-input>
                            </a-form-item>
                            <a-form-item>
                                <a-input 
                                    size="large"
                                    v-decorator='["code",{rules:[{required:true,message:"请输入验证码"}]}]'
                                    placeholder='邮箱验证码'
                                    :style="{ display: 'inline-block', width: 'calc(100% - 98px)'}"
                                >
                                    <a-icon slot="addonBefore" type="safety-certificate" style="color:grey" />
                                </a-input>
                                <a-button size="large" style="font-size: 14px; width: 88px; float: right" @click="getCode">
                                    <span v-if="flag">{{countdown}} s</span> 
                                    <span v-else>获取验证码</span>
                                </a-button>
                            </a-form-item> -->
                                <a-form-item>
                                    <a-button size="large" type='primary' html-type='submit' class='btn'
                                        @click="check">{{ $t('Login') }}</a-button>
                                </a-form-item>
                                <div v-if="otherWay">
                                    <a-divider style="font-size: 13px; margin: 0 0; border-color: black; top: -1.1em;"
                                        class="custom-divider">{{ $t('或使用以下方式登录') }}</a-divider>
                                    <div
                                        style="margin-bottom: 10px; text-align: center; display:block; margin-top: -0.5em;">
                                        <span v-for="item in loginList" class="j-text-main cursor-pointer margin"
                                            @click="handleOther(item)">【{{ item.label }}】</span>
                                    </div>
                                </div>
                            </a-form>
                            <div v-if="$store.state.commonModule.oemConfig.softwareStatement">
                            <div v-if="$store.state.language == 'zh'" class="login-bottom-tip">登录视为您已同意<span
                                    class="text-link" @click="openDeclare">《{{ $store.state.commonModule.oemConfig.softwareStatement }}》</span></div>
                            <div v-else class="login-bottom-tip">Sign in as you have agreed to the <span
                                    class="text-link" @click="openDeclare">agreement</span></div>
                            </div>
                        </div>
                    </a-spin>
                </div>
            </a-col>
        </a-row>
        <a-row id='footer' class="foot-animate" v-if="$store.state.commonModule.oemConfig.company">
            <a-col>
                <!-- <p style="text-align: center;">{{$t('Recommended_browser')}}</p> -->
                <p style="text-align: center;">Copyright ® {{ new Date().getFullYear() }} {{ $store.state.commonModule.oemConfig.company }}. All
                    rights
                    reserved.</p>
            </a-col>
        </a-row>

        <!-- 黑名单提示 -->
        <BlackListTip :visible="showLoginTip" :type="tipType" :frozenTime="frozenTime" @closeBlackTip="closeBlackTip" />

        <!-- 广电五舟软件声明 -->
        <SoftwareDeclare :isVisible="declareVisible" @isOpenDeclare="isOpenDeclare" />
    </div>
</template>
<script>

// import lanBtn_zh from '~/images/svg/ic_translate_cn.svg'
// import lanBtn_en from '~/images/svg/ic_translate_en.svg'
import SIdentify from './SIdentify'
import BlackListTip from '@/views/blackListTip/BlackListTip'
import SoftwareDeclare from '@/components/copyright/SoftwareDeclare'
import { encrypt } from '../untils/aes'
import request from "@/request/request"

export default {
    name: 'Login',
    // template: '<a-icon :component="lanBtn_zh, lanBtn_en" />',
    components: { SIdentify, BlackListTip, SoftwareDeclare },
    data() {
        return {
            form: this.$form.createForm(this),
            // spinning:false,
            countdown: 60,
            flag: false,
            // lanBtn_zh,
            // lanBtn_en,
            identifyCode: '',
            identifyCodes: '1234567890',
            showLoginTip: false,
            tipType: '',
            frozenTime: '',
            loginFormSpinning: false,
            codeValidateStatus: '',
            codeHelpTip: '',
            declareVisible: false,
            loginList: [],
            otherWay: false,
        }
    },
    computed: {
        islogin() {
            return this.$store.state.islogin
        },
        getlogin() {
            return this.$store.state.loginuser
        }
    },
    async mounted() {
        this.refreshCode();
        await this.single()
        this.getDomainList()
        this.$store.dispatch('commonModule/handleGetConfig')
        // this.handldeLogin()
    },
    methods: {
        async getDomainList() {
            const { data } = await this.$api.oauth.getQAuthDomain()
            if (data.domain_list.length == 0) this.otherWay = false
            else this.otherWay = true
            this.loginList = data.domain_list.map(item => ({ label: item.auth_name, value: item.domain_id }))
        },
        async handldeLogin() {

            const address = new URLSearchParams(window.location.href.split('?')[1])
            // 提取查询参数
            const loginType = address.get('login_type');
            const redirectUri = address.get('redirect_uri');
            const clientId = address.get('client_id');

            // 判断 login_type 是否等于 oauth2
            if (loginType === 'oauth2') {
                const params = {
                    client_id: clientId,
                    redirect_uri: redirectUri,
                    response_type: 'code',
                }
                const { data } = await this.$api.systemSettings.getAuthorizeApi(params)
                if (data.flag === 0) {
                    window.location.replace(data.redirect);
                }

            } else {
                console.log('login_type is not oauth2');
            }

        },
        async single() {
            const flag = window.location.href.indexOf('code')
            const code = window.location.href.slice(flag + 5, -2)
            const urlParams = new URLSearchParams(window.location.search)
            const getcode = urlParams.get('code')
            const getserviceid = urlParams.get('state')
            if (getcode != null) {
                const { data } = await this.$api.oauth.getAuthToken({ code: getcode, oauth2_service_id: getserviceid })
                const access_token = data.access_token
                if (data.flag !== 1) {
                    const { data } = await this.$api.oauth.getAuthUser({ accessToken: access_token, oauth_server_id: getserviceid })
                    const res = data
                    if (res.data.flag == 0) {
                        console.log("执行新函数")
                        //存储所拥有的路由表
                        localStorage.setItem('routes', JSON.stringify(res.data.params.fortend_routes));
                        console.log("luyou", res.data.params.fortend_routes)
                        localStorage.setItem('tags', JSON.stringify(res.data.params.tags));
                        //存储token
                        localStorage.setItem('authToken', JSON.stringify(res.data.params.token));
                        localStorage.setItem('user_id', res.data.params.id);
                        localStorage.setItem('isLogin', true)
                        this.$store.commit('islogin', {
                            islogin: true,
                        })
                        this.$store.commit('getlogin', {
                            loginuser: res.data.params.username
                        })
                        if (res.data.params.fortend_routes.indexOf('/index') !== -1) {
                            let url = this.getnewurl()
                            // 192.168.24.32:8003/?code=9c130211460c7e3d4b45&state=1#/
                            console.log(("urlvalue", url))
                            window.history.replaceState(null, null, url);
                            this.$router.replace({ path: '/index' });
                            // this.$router.push({ name: 'index' })
                        } else {
                            this.$router.push(res.data.params.fortend_routes[1]);
                        }
                    } else {
                        this.$store.commit('islogin', {
                            islogin: false,
                        })
                        this.$router.push({ path: '/' });
                        // this.$message.error(res.msg)
                    }
                }
            }



            // if (flag == '-1') {
            //     const { data: { data, success } } = await this.$api.oauth.getAuthLink()
            //     if (success) {
            //         if (data.auth_url) window.location.href = data.auth_url
            //     } else {
            //         // this.$message.error(msg)
            //     }
            // }
            // if (flag != '-1') {
            //     const { data } = await this.$api.oauth.getUserData(code)
            //     const res = data
            //     if (res.success) {
            //         console.log("执行旧函数")
            //         //存储所拥有的路由表
            //         localStorage.setItem('routes', JSON.stringify(res.data.params.fortend_routes));
            //         // console.log("luyou", res.data.params.fortend_routes)
            //         localStorage.setItem('tags', JSON.stringify(res.data.params.tags));
            //         //存储token
            //         localStorage.setItem('authToken', JSON.stringify(res.data.params.token));
            //         localStorage.setItem('user_id', res.data.params.id);
            //         this.$store.commit('islogin', {
            //             islogin: true,
            //         })
            //         this.$store.commit('getlogin', {
            //             loginuser: res.data.params.username
            //         })
            //         if (res.data.params.fortend_routes.indexOf('/index') != -1) {
            //             let url = this.getnewurl()
            //             window.history.replaceState(null, null, url);
            //             this.$router.replace({ path: '/index' });
            //         } else {
            //             this.$router.push(res.data.params.fortend_routes[1]);
            //         }
            //     } else {
            //         this.$router.push({ path: '/' });
            //         // this.$message.error(res.msg)
            // }
            // }
        },
        async handleOther(item) {
            const { data: { data, flag } } = await this.$api.oauth.getDomainUrl({ domain_id: item.value })
            // this.oauth2_service_id = item.value
            const originalUrl = window.location.origin;
            localStorage.setItem('originalAuthUrl', originalUrl);
            window.location.replace(data.auth_url);
        },
        // setCookie(cname,cvalue,exdays){  //设置cookie方法
        //     var d = new Date();
        //     d.setTime(d.getTime()+(exdays*24*60*60*1000));
        //     var expires = "expires="+d.toGMTString();
        //     document.cookie = cname+"="+cvalue+"; "+expires;
        //     // document.domain = '192.168.11.191'
        // },
        // getCode() {
        //     console.log('获取验证码')
        //     if (this.countdown == 60) {
        //         this.flag = true
        //         var timer = setInterval(() => {
        //             if (this.countdown > 0) {
        //                 this.countdown--
        //             } else {
        //                 this.countdown = 60
        //                 this.flag = false
        //                 clearInterval(timer)
        //             }
        //         }, 1000)
        //     }
        // },
        //图形验证码
        validateCode(rule, value, callback) {
            if (value && this.identifyCode !== value) {
                // this.loginForm.code = ''
                // this.refreshCode();
                callback(new Error(this.$t('please_enter_correct_code')))
            } else {
                callback()
            }
        },

        getnewurl() {
            let url = document.location.href;
            let reg = /([&?])(code=[^&]*|state=[^&]*)/g;
            // let reg = /[^\w](code)=?([^&|^#]*)/g;
            url = url.replace(reg, "");
            reg = /&&/g;
            url = url.replace(reg, "");
            reg = /&#/g;
            url = url.replace(reg, "#");
            reg = /\?#/g;
            url = url.replace(reg, "#");
            reg = /\?#/g;
            url = url.replace(reg, "#");

            return url;
        },

        // 语言切换
        handleChangeLanguage() {
            if (this.$i18n.locale == 'zh') {
                this.$i18n.locale = 'en'
            } else {
                this.$i18n.locale = 'zh'
            }
            localStorage.setItem("language", this.$i18n.locale);
            this.$store.commit("getlanguage", {
                language: this.$i18n.locale,
            });
        },

        handleCodeChange(e) {
            if (this.identifyCode == e.target.value) {
                this.codeValidateStatus = 'success';
                this.codeHelpTip = '';
            }
        },

        // 验证校验码是否正确
        validateCodeFun() {
            let status = false;
            this.form.validateFields(['code'], {}, (errors, values) => {
                if (values.code == this.identifyCode) {
                    this.codeValidateStatus = 'success';
                    this.codeHelpTip = '';
                    status = true;
                } else {
                    this.codeValidateStatus = 'error';
                    this.codeHelpTip = this.$t('please_enter_correct_code');
                    status = false;
                }
            })
            return status
        },

        //登录验证
        async check(e) {
            e.preventDefault();
            const codeStatus = this.validateCodeFun();
            this.form.validateFields((err, value) => {
                if (!err && codeStatus) {
                    this.loginFormSpinning = true;

                    const urlParams = new URLSearchParams(window.location.search)
                    const redirectUri = urlParams.get('redirect_uri');
                    const clientId = urlParams.get('client_id');
                    const state_id = urlParams.get('state');
                    if (clientId != null) {
                        const client_id = clientId
                        const redirect_uri = redirectUri
                        const response_type = 'code'
                        const state = state_id
                        const params = {
                            username: value.user,
                            password: encrypt(value.pwd)
                        }
                        this.$api.systemSettings.authorizeApi(client_id, response_type, redirect_uri, state, params)
                            .then(async ({ data }) => {
                                console.log('data', data, data.redirect)
                                if (data.flag === 0) {
                                    window.location.replace(data.redirect);
                                }
                            }).catch((err) => {
                                console.error('请求失败:', err);
                                this.loginFormSpinning = false;  // 确保关闭加载指示器
                            });

                        this.loginFormSpinning = false;

                    } else {
                        const flag = window.location.href.indexOf('code')
                        const code = window.location.href.slice(flag + 5, -2)
                        this.$axios.post(this.allurl + 'login', value, { withCredentials: true }).then(res => {

                            this.$axios.put(this.allurl + 'usermanager/login/', {
                                username: value.user,
                                password: encrypt(value.pwd)
                            }, { withCredentials: true }).then(res => {
                                console.log('登录成功', res)
                                this.handldeLogin()
                                if (res.data.flag == 0) {
                                    //存储所拥有的路由表
                                    localStorage.setItem('routes', JSON.stringify(res.data.params.fortend_routes));
                                    //存储所拥有的权限
                                    localStorage.setItem('tags', JSON.stringify(res.data.params.tags));
                                    //存储token
                                    localStorage.setItem('authToken', JSON.stringify(res.data.params.token));
                                    localStorage.setItem('user_id', res.data.params.id);
                                    localStorage.setItem('isLogin', true)
                                    // this.resetSetItem('islogin',true)
                                    this.$store.commit('islogin', {
                                        islogin: true,
                                        // username: res.data.params.user
                                    })
                                    this.$store.commit('getlogin', {
                                        loginuser: res.data.params.username
                                    })
                                    // localStorage.setItem('username',res.data.params.user)
                                    if (res.data.params.fortend_routes.indexOf('/index') != -1) {
                                        let url = this.getnewurl()
                                        window.history.replaceState(null, null, url);
                                        this.$router.push({ name: 'index' });
                                    } else {
                                        this.$router.push(res.data.params.fortend_routes[1]);
                                    }
                                    this.form.resetFields() //重置弹窗
                                    localStorage.setItem('isDelay', true)
                                    this.$nextTick(() => {
                                        this.$notification['success']({
                                            message: this.$t('Login_successful'),
                                            duration: 3
                                        });
                                        const dom = document.getElementsByClassName('ant-notification ant-notification-topRight')[0]
                                        dom.style.top = '66px'
                                    })
                                } else {
                                    if (res.data.id === 'usermanager/login/pwd_error_record/failed') { //账户被冻结了
                                        if (res.data.params.leave_hours == -1) { // 永久封锁
                                            this.tipType = 'lock';
                                        } else {
                                            this.tipType = 'frozen';
                                            this.frozenTime = `${res.data.params.leave_hours}小时`;
                                        }
                                        this.showLoginTip = true;
                                    } else if (res.data.id === 'usermanager/login/blacklist/failed') { // 账户进入了黑名单
                                        this.tipType = 'black';
                                        this.showLoginTip = true;
                                    } else {
                                        this.form.resetFields() //重置弹窗
                                        this.$store.commit('islogin', {
                                            islogin: false,
                                        })
                                        this.$notification['error']({
                                            message: this.$t('Login_failed'),
                                            description:
                                                this.$t('Login_failed_tips'),
                                        });
                                        this.refreshCode();
                                    }
                                }
                            }).catch(err => {
                                    this.$notification['error']({
                                        message: this.$t('Login_failed'),
                                        description:
                                            this.$t('Network-error'),
                                    });
                                    // this.form.resetFields() //重置弹窗
                                }).finally(() => {
                                    this.loginFormSpinning = false;
                                })
                            this.loginFormSpinning = false;

                        })
                    }
                }
            })
        },

        //刷新验证码
        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[
                    this.randomNum(0, this.identifyCodes.length)
                ]
            }
        },
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        },

        //关闭黑名单或冻结的提示
        closeBlackTip() {
            this.showLoginTip = false;
        },

        // 打开软件声明弹窗
        openDeclare() {
            this.declareVisible = true;
        },
        // 关闭软件声明弹窗
        isOpenDeclare() {
            this.declareVisible = false;
        }
    }
}
</script>
<style lang="scss" scoped>
#Login {
    position: fixed;
    width: 100%;
    height: 100%;
    /* z-index: -100; */
    transition: 1s opacity;
    margin: 0;
    padding: 0;
    bottom: 0;
    background-size: cover;
    /* background-color: #02152b; */
    background-image: url('../../static/copyright/A02_xr.jpg');
}

.header {
    display: flex;
    align-items: center;
    padding: 1rem 2rem 0 1rem;
}

video {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100;
}

video #bg {
    width: auto;
    height: auto;
    z-index: -100;
    background-size: contain;
}

.loginform {
    /* margin-top:15em; */
    position: absolute;
    top: 50%;
    right: 10%;
    z-index: 999;
    width: 377px;
    margin-top: -215px;
    /* height: 78%; */
}

.wetitle {
    color: var(--themeColor) !important;
    /* line-height: 4em; */
    text-align: center;
    font-weight: bold;
    padding: 2rem 0 1rem 0;
}

/* 登录按钮 */
.btn {
    width: 100%;
    /* margin-bottom: 1rem; */
}

.bor {
    /* border:1.5px solid #3683BF; */
    box-shadow: 0px 0px 8px #aebfc9 inset;
    border-radius: .5em;
    padding: 5px;
}

.welcome {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    padding: 2em 2.5em;
    z-index: 999;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2)
}

#footer {
    position: fixed;
    bottom: 0em;
    width: 100%;
    font-size: 12px;
    color: #026db8;
    /* background-color: #010d19; */
    padding: 0.5rem 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.L-input .ant-input {
    border-left: 0;
}

/* 验证码图片盒子 */
.codeImage {
    position: absolute;
    width: 114px;
    height: 42px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #999;
}

/* 切换中英文按钮 */
.change-lang-btn {
    font-size: 14px;
    cursor: pointer;
    float: right;
    color: var(--themeColor);
}

/* 登录框底部提示文字 */
.login-bottom-tip {
    /* position: absolute;
        bottom: 40px; */
    font-size: 14px;
    color: var(--mainColor666);
}

.text-link {
    color: #026db8;
    text-decoration: underline;
    cursor: pointer;
}

.login-page-animate {
    animation: fadeIn 1.5s ease-in-out forwards;
}

.login-box-animate {
    transform: translate3d(100%, 0, 0);
    animation: slideInFromRight 1s ease-in-out forwards;
}

.logo-animate {
    animation: bounce 2s ease-in-out forwards;
}

.foot-animate {
    animation: slideInFromBottom 2s ease-in-out forwards;
}


// 渐入
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

// 从右往左进入动画
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

// 从上往下落下动画
@keyframes bounce {
    0% {
        transform: translateY(-100%);
    }

    70% {
        transform: translateY(0);
    }

    90% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(0);
    }
}


// 从下往上进入动画
@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translatY(0);
        opacity: 1;
    }
}

.custom-divider::before {
    border-color: #cfcfcf !important;
}

.custom-divider::after {
    border-color: #cfcfcf !important;
}
</style>
